<template>
	<view class="setpwd">
		<!-- 账号 -->
		<view class="opt">
			<text class="label">你的账号:</text>
			<input class="inp" type="text" placeholder="请输入">
		</view>
		
		<!-- 发送验证码 -->
		<view class="opt">
			<button class="btn1">点击发送邮箱验证码</button>
		</view>
		
		
		<!-- 验证码 -->
		<view class="opt">
			<text class="label">验证码:</text>
			<input class="inp" type="text" placeholder="请输入">
		</view>
		
		<!-- 新密码 -->
		<view class="opt">
			<text class="label">新密码:</text>
			<input class="inp" type="password" placeholder="请输入">
		</view>
		<!-- 确认密码 -->
		<view class="opt">
			<text class="label">确认密码:</text>
			<input class="inp" type="password" placeholder="请输入">
		</view>
		<view class="opt">
			<button class="btn ">保存</button>
		</view>
	</view>
</template>


<style lang="scss">
.setpwd {
	padding: 20rpx 30rpx;
	.opt-1 {
		margin-top: 100rpx;
	}
	.opt {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.btn1 {
			padding: 0;
			margin: 0;
			background-color: #fff;
			width: 100%;
			color: #333;
			font-size: 32rpx;
			&::after {
				border: 0;
			}
		}
		.label {
			display: inline-block;
			width: 160rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: right;
			box-sizing: border-box;
			padding-right: 20rpx;
		}
		.inp {
			width: calc(100% - 160rpx);
			height: 80rpx;
			border-bottom: 1px solid #ccc;
			padding-left: 20rpx;
			box-sizing: border-box;
			font-size: 32rpx;
		}
		.btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			color: #666;
			background-color: transparent;
		}
	}
}
</style>
